<template>
  <yc-container spacious>
    <yc-search-panel slot="header" v-model="active">
        <yc-bar slot="title">
          <yc-bar-space />
          <yc-bar-cell>
            <yc-pagination :full="false"
                          :pagination="pagination"/>
            </yc-bar-cell>
            <yc-bar-space />
            <yc-bar-cell>
              <el-button-group>
              <yc-button
                        size="mini"
                        icon="el-icon-refresh"
                        label="刷新"
                        @click="handleAddRow()"/>
              <yc-button
                      size="mini"
                      icon="el-icon-set-up"
                      label="设置"
                      @click="handleDeleteRow()"/>
              </el-button-group>
            </yc-bar-cell>
            <yc-bar-cell>
            <yc-button type="primary"
                        size="mini"
                        icon="el-icon-plus"
                        label="新增"
                        @click="handleRefresh"/>
          </yc-bar-cell>
        </yc-bar>
        <yc-form ref='form'
                  v-model="search"
                  :setting="formSetting"
                  :itemSetting="formItemSetting"/>
      </yc-search-panel>
      <vxe-table
        v-loading="loading"
        show-overflow
        auto-resize
        highlight-current-row
        :edit-rules="editRules"
        :sort-config="sortConfig"
        @current-change="handleCurrentChange"
        keep-source
        ref="table"
        :data="tableData"
        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'fa fa-pencil-square-o'}">
        <template v-slot:operation="{ row }">
            <yc-button type="text"
                      size="mini"
                      label="编辑"
                      @click="handleAddRow(row)"/>
              <yc-button
                  size="mini"
                  type="text"
                  label="删除"
                  @click="handleDeleteRow(row)"/>
          </template>
      </vxe-table>
    <vxe-pager
          :loading="loading"
          :current-page="pagination.current"
          :page-size="pagination.size"
          :total="pagination.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange">
        </vxe-pager>

    <dialog-browse :primaryKey="primaryKey" :diglogConf="diglogBrowseConf"></dialog-browse>
    <yc-table-columns-filter ref="columnFilter" v-model="tableColumns" :options="columnsFilter.options" @change="onColumnFilterChange"></yc-table-columns-filter>
  </yc-container>
</template>

<script>
import crud from './crud'
import dialogBrowse from './dialog-browse'
export default {
  name: 'yc-container-common',
  mixins: [crud],
  components: { dialogBrowse }
}
</script>
